<template>
	<view class="follow">
		<view class="follow_con">
			<view class="con_auto">
				<u--form labelPosition="left" :model="queryForm" :rules="rules" ref="uForm" labelWidth="100">
					<u-form-item label="跟进类型" prop="type" borderBottom :ref="form1" @tap.stop="hanleTab('type')">
						<u--input
							v-model="queryForm.type"
							disabled
							border="none"
							:placeholderStyle="{
								background: 'transparent'
							}"
							disabledColor="transparent"
							placeholder="请选择跟进类型"
							suffixIcon="arrow-down"
						></u--input>
					</u-form-item>
					<u-form-item label="意向跟进" prop="type" borderBottom :ref="form1" @tap.stop="hanleTab('type_cate')" v-if="queryForm['type'] == '意向跟进'">
						<u--input
							v-model="queryForm.type_cate"
							disabled
							border="none"
							:placeholderStyle="{
								background: 'transparent'
							}"
							disabledColor="transparent"
							placeholder="请选择意向跟进"
							suffixIcon="arrow-down"
						></u--input>
					</u-form-item>
					<u-form-item label="客情维系" prop="type" borderBottom :ref="form1" @tap.stop="hanleTab('type_cate1')" v-if="queryForm['type'] == '客情维系'">
						<u--input
							v-model="queryForm.type_cate1"
							disabled
							border="none"
							:placeholderStyle="{
								background: 'transparent'
							}"
							disabledColor="transparent"
							placeholder="请选择客情维系"
							suffixIcon="arrow-down"
						></u--input>
					</u-form-item>
					<u-form-item label="售后回访" prop="type" borderBottom :ref="form1" @tap.stop="hanleTab('type_cate2')" v-if="queryForm['type'] == '售后回访'">
						<u--input
							v-model="queryForm.type_cate2"
							disabled
							border="none"
							:placeholderStyle="{
								background: 'transparent'
							}"
							disabledColor="transparent"
							placeholder="请选择售后回访"
							suffixIcon="arrow-down"
						></u--input>
					</u-form-item>
					<u-form-item label="投诉跟进" prop="type" borderBottom :ref="form1" @tap.stop="hanleTab('type_cate3')" v-if="queryForm['type'] == '投诉跟进'">
						<u--input
							v-model="queryForm.type_cate3"
							disabled
							border="none"
							:placeholderStyle="{
								background: 'transparent'
							}"
							disabledColor="transparent"
							placeholder="请选择投诉跟进"
							suffixIcon="arrow-down"
						></u--input>
					</u-form-item>
					<u-form-item label="跟进方式" prop="way" borderBottom :ref="form1" @tap.stop="hanleTab('way')">
						<u--input
							v-model="queryForm.way"
							disabled
							border="none"
							:placeholderStyle="{
								background: 'transparent'
							}"
							disabledColor="transparent"
							placeholder="请选择联系方式"
							suffixIcon="arrow-down"
						></u--input>
					</u-form-item>
					<u-form-item label="跟进内容" prop="description" borderBottom :ref="form1">
						<u--textarea v-model="queryForm.description" placeholder="请输入跟进内容"></u--textarea>
					</u-form-item>
					<u-form-item label="下次跟进时间" prop="next_time" borderBottom @tap.stop="hanleTime('next_time')">
						<u--input
							v-model="queryForm.next_time_value"
							disabled
							border="none"
							:placeholderStyle="{
								background: 'transparent'
							}"
							ref="dateTime"
							:formatter="formatter"
							disabledColor="transparent"
							placeholder="请选择下次跟进时间"
							suffixIcon="arrow-down"
						></u--input>
					</u-form-item>
					<u-form-item label="上传图片" prop="next_time" borderBottom>
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10"></u-upload>
					</u-form-item>
				</u--form>
				<u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>
			</view>
		</view>
		<u-picker :show="showPicker" :columns="columnsPicker" :keyName="pickerName" @cancel="showPicker = false" @confirm="confirmPicker"></u-picker>
		<u-datetime-picker :show="showTime" v-model="timeValue" :mode="timeType" @cancel="showTime = false" @confirm="confirmTime"></u-datetime-picker>
	</view>
</template>

<script>
export default {
	data() {
		return {
			queryForm: {
				type: '意向跟进',
				type_cate: '有意向',
				type_cate1: '已做到位',
				type_cate2: '已回访',
				type_cate3: '已跟进',
				type_cate4: '已保养',
				way: '微信',
				description: '',
				next_time: '',
				next_time_value:'',
				user_id:0
			},
			followtype: [
				[
					{ id: 1, title: '意向跟进', sort: 0, status: 1, create_time: '2023-11-06 20:16:29', update_time: '2023-11-06 20:16:29' },
					{ id: 2, title: '客情维系', sort: 0, status: 1, create_time: '2023-11-06 20:16:29', update_time: '2023-11-06 20:16:29' },
					{ id: 3, title: '售后回访', sort: 0, status: 1, create_time: '2023-11-06 20:16:29', update_time: '2023-11-06 20:16:29' },
					{ id: 4, title: '投诉跟进', sort: 0, status: 1, create_time: '2023-11-06 20:16:29', update_time: '2023-11-06 20:16:29' },
					{ id: 5, title: '保养邀约', sort: 0, status: 1, create_time: '2023-11-06 20:16:29', update_time: '2023-11-06 20:16:29' },
					{ id: 6, title: '活动邀约', sort: 0, status: 1, create_time: '2023-11-06 20:16:29', update_time: '2023-11-06 20:16:29' }
				]
			],
			followtype_cate: [
				[
					{
						title: '有意向'
					},
					{
						title: '没有意向'
					},
					{
						title: '考虑中'
					}
				]
			],
			followtype_cate1: [
				[
					{
						title: '已做到位'
					},
					{
						title: '还未做到位'
					}
				]
			],
			followtype_cate2: [
				[
					{
						title: '已回访'
					},
					{
						title: '需要二次回访'
					}
				]
			],
			followtype_date3: [
				[
					{
						title: '已跟进'
					}
				]
			],
			followtype_date4: [
				[
					{
						title: '已保养'
					},
					{
						title: '约定时间保养'
					}
				]
			],
			rules: [],
			pickerName: 'title',
			pickerItem: 'type',
			showPicker: false,
			columnsPicker: [],
			followway: [
				[
					{
						title: '微信'
					},
					{
						title: '电话'
					},
					{
						title: '短信'
					}
				]
			],
			showTime: false,
			timeValue: Date.now(),
			timeType: 'datetime',
			timeItem: '',
			fileList1: []
		};
	},
	onLoad({user_id}) {
		if(user_id){
			this.queryForm.user_id = user_id
		}
		uni.setNavigationBarTitle({
			title:'添加跟进'
		})
		// this.getFollowList();
	},
	methods: {
		submit() {
			let _this = this;
			let urls = [];
			if (this.fileList1.length > 0) {
				this.fileList1.forEach((item) => {
					if (item.data) {
						urls.push(item.data);
					}
				});
			}
			_this.$http('follow/add', {
				...this.queryForm,
				urls: urls.join(',')
			}).then(res=>{
				if(res.code){
					_this.$u.toast('增加成功')
					uni.navigateBack()
				}
			});
		},
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];

				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: this.httpbaseUrl + result.url,
						data: result.url
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(url) {
			let _this = this;
			return new Promise((resolve, reject) => {
				uni.getFileInfo({
					filePath: url,
					digestAlgorithm: 'md5',
					success(file) {
						_this
							.$upload(url, {
								type: 'image',
								fileMd5: file.digest
							})
							.then((res) => {
								resolve(res.data);
							});
					}
				});
			});
		},
		formatter(value) {
			// 让输入框只能输入数值，过滤其他字符
			return uni.$u.timeFormat(value, 'yyyy年mm月dd日 hh时MM分ss秒');
		},
		getFollowList() {
			this.$http('follow_cate/getFollowCateByList', {}).then((res) => {
				if (res.code) {
					this.followList = res.data;
				}
			});
		},
		hanleTime(type) {
			this.timeItem = type;
			this.timeType = 'datetime';
			this.timeValue = Date.now();
			this.showTime = true;
		},
		confirmTime({ value, mode }) {
			let item = this.timeItem;
			if (mode == 'datetime') {
				this.queryForm[item] = value;
				this.queryForm[item+'_value'] = uni.$u.timeFormat(value, 'yyyy年mm月dd日 hh时MM分ss秒')
			}
			this.showTime = false;
			this.$forceUpdate();
		},
		hanleTab(type) {
			let _this = this;
			this.pickerName = 'title';
			this.pickerItem = type;
			console.log('follow' + type);
			this.columnsPicker = _this['follow' + type];
			this.showPicker = true;
		},
		confirmPicker({ index, value }) {
			let _this = this;
			const item = _this.pickerItem;
			if (item == 'type') {
				_this.queryForm['type'] = value[0]['title'];
			}else{
				_this.queryForm[item] = value[0]['title']
			}
			_this.showPicker = false;
			this.$forceUpdate();
		}
	}
};
</script>

<style lang="scss" scoped>
.follow {
	&_con {
		width: 94.7%;
		margin: 0 auto;
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 30rpx;
		padding-bottom: 24rpx;
	}
}
</style>
